<template>
    <div class="main">
        <!-- <el-header style="margin-top: 12px; min-width: 901px;">
            <span style=" margin-right: 15px;">编码:</span>
            <el-input style="width: 180px;" size="small" placeholder="请输入编码" v-model="queryInfo.code"></el-input>
            <span style="margin-left: 25px; margin-right: 15px;">名称:</span>
            <el-input style="width: 180px;height: 32px;" size="small" placeholder="请输入名称"
                v-model="queryInfo.name"></el-input>
            <el-button type="primary" size="small" style="margin-left: 15px;"
                @click="getassignmentList()">查询</el-button>
            <el-button size="small" @click="resetForm()">重置</el-button>
            <el-button type="text">展开</el-button>
        </el-header> -->
        <el-main style="padding: 0;">
            <el-row>
                <el-col :span="24">
                    <el-button type="text" style="padding: 0 15px;margin: 8px 8px 8px 0; font-size: 16px;" @click="addList"  icon="el-icon-circle-plus-outline">新增</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 8px 8px 8px 0; font-size: 16px;" icon="el-icon-download">导出</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 8px 8px 8px 0; font-size: 16px;" icon="el-icon-upload2">导入</el-button>
                </el-col>
            </el-row>
            <!-- 数据渲染部分 -->
            <el-table :data="tableData" style="width: 100%" border row-key="id" lazy :load="load"
                :tree-props="{ children: 'children', hasChildren: 'hasChild' }">
                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column label="名称"   >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="编码">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="电话" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" >
                    <template slot-scope="scope">
                        <span v-show="scope.row.isEnabled == '1'">是</span>
                        <span v-show="scope.row.isEnabled != '1'">否</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="DeleteTi(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>






            <!-- 添加或者编辑募捐团队右侧弹出的抽屉 -->
            <el-drawer :title="id ? '修改' : '新增'" :visible.sync="open" @close="open = false">
                <el-form :model="addassignment" ref="addassignment" label-width="100px" class="demo-ruleForm" size="mini">
                    <el-row :gutter="10" style="padding: 15px;">

                    
                        <el-col :span="24">
                            <el-form-item label="父级" prop="code">
                                <el-tree  :props="propsS" @node-click="handleNodeClickA"
                                :load="loadNodeA"
                                 lazy
                                 ref="tree"
                                highlight-current
                                :node-key="key"
                                ></el-tree>
                            </el-form-item>
                        </el-col>




                        
                        <el-col :span="24">
                            <el-form-item label="编码">
                                <el-input v-model="addassignment.code"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="名称">
                                <el-input v-model="addassignment.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="电话">
                                <el-input v-model="addassignment.phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="启用状态">
                                <el-select v-model="addassignment.isEnabled" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input v-model="addassignment.remark"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="创建人">
                                <el-input v-model="addassignment.faxReceipt" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="创建时间">
                                <el-date-picker
                                :disabled="true"
                                v-model="value1"
                                type="datetime"
                                style="width: 100%;"
                                placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="修改人">
                                <el-input v-model="addassignment.faxReceipt" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="修改时间">
                                <el-date-picker
                                :disabled="true"
                                v-model="value1"
                                style="width: 100%;"
                                type="datetime"
                                placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>

















            <pagination :page="queryInfo.pageNo" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>
        </el-main>
    </div>
</template>

<script>
import Pagination from "../Pagination";
export default {
    data() {
        return {
            id: '',
            open: false,//右侧抽屉
            visible: true,//删除的弹框
            dialogFormVisible: false,
            total: 0,
            queryInfo: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            },
            value1:'',

            //子级菜单的页码数据
            queryInfoAAA: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10,
                pid: 0,
            },

            //父级查询
            queryInfoBBB: {
                _t: new Date().getTime(),
                hasChildField: 'has_child',
                pidField: 'pid',
                code: 'id',
                text: 'name',
                tableName: 'bas_warehouse',
                condition: '',
                pid: 0,
            },
            // 子级查询
            queryInfoCCC: {
                _t: new Date().getTime(),
                hasChildField: 'has_child',
                pidField: 'pid',
                code: 'id',
                text: 'name',
                tableName: 'bas_warehouse',
                condition: '',
                pid: '40288183712beaa901712c1935d10006',
            },
                    
                propsS: {
                label: 'title',
                children: 'zones',
                isLeaf: 'leaf'
                },

                //父节点列表
                aerr:[],
                //子节点列表
                berr:[],
                currentNode: null, // 当前选中的节点
                key:'key',




                


            //获取到的数据列表  
            tableData: [],
            addassignment:{
                "pid": "40288183712beaa901712c1935d10006",
                "code": "编码",
                "name": "名称",
                "phone": "电话",
                "isEnabled": "1",
                "remark": "备注"
            },
            options: [
                { value: '1', label: '是' },
                { value: '0', label: '否' }
            ],
            optionsA: [
                { value: '0', label: '一级' },
                { value: '1', label: '二级' }
            ],
        }
    },
    methods: {
        //获取子级菜单列表
        async load(tree, treeNode, resolve) {
            // console.log(tree);//获取到的数据
            this.queryInfoAAA.pid = tree.id;
            const { data: res } = await this.axios.get("bas/basWarehouse/childList", {
                params: this.queryInfoAAA,
            });
            if (res.code != 200) return this.$message.error(res.message);
            resolve(res.result)
        },




        


        
    handleNodeClickA(data) {
        if (!data.leaf) {//选中顶级节点
            this.addassignment.pid = data.key;
        }
        // console.log(data);
        this.addassignment.pid = data.key;
      },
      
     async loadNodeA(node, resolve) {
        // console.log(node);
        if (node.level === 0) {
          return resolve(this.aerr);
        }
        if (node.level > 1) return resolve([]);
        this.childrens();
        setTimeout(() => {
          const data = this.berr;

          resolve(data);
        }, 500);
      },
      
      //获取父级菜单
    async  parments(){
        const { data: res } = await this.axios.get("sys/dict/loadTreeData", {
                params: this.queryInfoBBB,
            });
            this.aerr = res.result;
        //    console.log(res.result);
      },
      //获取子级菜单
      async  childrens(){
        const { data: res } = await this.axios.get("sys/dict/loadTreeData", {
                params: this.queryInfoCCC,
            });
            this.berr = res.result;
      },







      




      


    

        //查询数据渲染列表
        async getassignmentList() {
            const { data: res } = await this.axios.get("bas/basWarehouse/rootList", {
                params: this.queryInfo,
            });
            if (res.code != 200)  this.$message.error(res.message);
            this.tableData = res.result.records;
            this.total = res.result.total;
        },
        //初始化数据
        addList() {
            this.parments();
            this.addassignment = {
                "pid": "40288183712beaa901712c1935d10006",
                "code": "",
                "name": "",
                "phone": "",
                "isEnabled": "1",
                "remark": ""
            };
            this.open = true;
        },
        //新增数据
        async addForm() {
            const { data: res } = await this.axios.post("bas/basWarehouse/add", this.addassignment);
            if (res.code != 200) return this.$message.error("新增录入失败");
            this.$message.success("新增录入成功");
            this.open = false;
            this.getassignmentList();
        },
        //编辑---【数据回显】
        handleEdit(row) {
            // console.log(index, row);
            this.id = row.id;
            this.addassignment = row;
            this.open = true;
        },
        //编辑数据
        async editForm() {
            const { data: res } = await this.axios.put("bas/basWarehouse/edit", this.addassignment);
            if (res.code != 200) return this.$message.error("编辑失败");
            this.$message.success("编辑成功");
            this.open = false;
            this.getassignmentList();
        },
        //删除提示操作
        DeleteTi(row) {
            this.$confirm(`此操作将永久删除该数据, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.handleDelete(row.id);
            });
        },
        //删除操作
        async handleDelete(id) {
            const { data: res } = await this.axios.delete(`bas/basWarehouse/delete`, {
                params: { id: id }
            });
            if (res.code != 200) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        //重置数据
        resetForm() {
            this.queryInfo = {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            };
            this.getassignmentList()
        },

        // 分页器
        setRows(val) {
            this.queryInfo.pageSize = val;
            this.getassignmentList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
        },
        //自动增加序号
        indexAdd(index) {
            const page = this.queryInfo.pageNo // 当前页码
            const pagesize = this.queryInfo.pageSize // 每页条数
            return index + 1 + (page - 1) * pagesize
        },

    },
    mounted() {
        this.parments(); 
        this.getassignmentList();
    },
    components: {
        Pagination
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    position: absolute;
    right: 0;
    height: 100%;
}
::v-deep .el-drawer.rtl{
    width: 50% !important;
}
</style>